<template>
    <div class="white-box">
        <div class="table-mb">
            <el-button type="primary" @click="clickAdd">添加</el-button>
        </div>
        <div class="task-one">
            <div class="task-one__item">
                <span class="task-one__label">打印机编号：</span>
                <el-input placeholder="输入打印机编号" v-model.trim="print_sn" size="default" clearable></el-input>
            </div>
            <div class="task-one__item">
                <span class="task-one__label">打印机名称：</span>
                <el-input placeholder="输入打印机名称" v-model.trim="so" size="default" clearable></el-input>
            </div>
            <div class="task-one__btn clearfix">
                <el-button type="primary" :loading="search_btn" :icon="Search" @click="handleSearch">搜索</el-button>
            </div>
        </div>

        <el-table
            class="table-mb"
            v-loading="loading"
            :data="arr_data"
            :header-cell-style="{ background: '#F5F7FA' }"
            element-loading-background="rgba(255, 255, 255, 0.6)"
        >
            <el-table-column prop="print_id" label="ID" min-width="100"></el-table-column>
            <el-table-column prop="title" label="打印机名称" min-width="140"></el-table-column>
            <el-table-column prop="title" label="二维码" min-width="160">
                <template #default="{ row }">
                    <el-image class="table-lr__img" loading="lazy" :src="proxy.imgUrl + row.photo + '!img_400'" fit="cover" v-if="row.photo" />
                </template>
            </el-table-column>
            <el-table-column prop="print_sn" label="打印机编号" min-width="160"></el-table-column>
            <el-table-column prop="print_key" label="打印机识别码" min-width="160"></el-table-column>
            <el-table-column prop="created_at_label" label="添加时间" width="160"></el-table-column>
            <el-table-column label="操作" width="300" class-name="operation-nav" fixed="right">
                <template #default="{ row }">
                    <el-button class="theme-btn" link type="primary" @click="clickEdit(row)">编辑</el-button>
                    <el-button class="theme-btn" link type="primary" @click="clickView(row)">查看二维码</el-button>
                    <el-button class="theme-btn" link type="primary" @click="clickResets(row)">重置卷标纸</el-button>
                    <el-popconfirm title="是否确定删除？" confirm-button-text="确定" cancel-button-text="取消" @confirm="handleDelete(row)">
                        <template #reference>
                            <el-button class="theme-btn" link type="primary">删除</el-button>
                        </template>
                    </el-popconfirm>
                </template>
            </el-table-column>
        </el-table>
        <!-- 分页 -->
        <el-pagination
            background
            v-model:current-page="page"
            v-model:page-size="pageSize"
            :page-sizes="pageSizeNum"
            :total="totalNums"
            layout="total, sizes, prev, pager, next, jumper"
        >
        </el-pagination>

        <!-- 添加/编辑 -->
        <el-dialog
            v-model="dialogZd"
            :title="`${class_type == 1 ? '添加' : '编辑'}打印机`"
            width="620px"
            :append-to-body="true"
            :destroy-on-close="true"
            :close-on-click-modal="false"
            @close="closeDialog"
        >
            <el-form ref="ruleZdRef" :model="ruleZdForm" :rules="ruleCheckZd" label-width="150px">
                <el-form-item label="飞鹅云用户名" prop="user" required>
                    <el-input v-model="ruleZdForm.user" clearable placeholder="请输入飞鹅云用户名" />
                </el-form-item>
                <el-form-item label="飞鹅云用户key" prop="user_key" required>
                    <el-input v-model="ruleZdForm.user_key" clearable placeholder="请输入飞鹅云用户key" />
                </el-form-item>
                <el-form-item label="打印机名称" prop="title" required>
                    <el-input v-model="ruleZdForm.title" clearable placeholder="请输入打印机名称" />
                </el-form-item>
                <el-form-item label="打印机编号" prop="print_sn" required>
                    <el-input v-model.number="ruleZdForm.print_sn" clearable oninput="value=value.replace(/[^\d]/g,'')" placeholder="请输入打印机编号" />
                </el-form-item>
                <el-form-item label="打印机识别码" prop="print_key" required>
                    <el-input v-model="ruleZdForm.print_key" clearable placeholder="请输入打印机识别码" />
                </el-form-item>
                <el-form-item>
                    <div class="flexs" style="margin-top: 20px">
                        <el-button type="primary" :loading="form_loading" @click="submitZdForm(ruleZdRef)">
                            {{ class_type == 1 ? "确认添加" : "确认保存" }}
                        </el-button>
                        <el-button @click="resetZdForm(ruleZdRef)">重置</el-button>
                    </div>
                </el-form-item>
            </el-form>
        </el-dialog>
    </div>
</template>

<script setup>
import { getCurrentInstance, ref, onMounted, watch, reactive } from "vue"
import { Search } from "@element-plus/icons-vue"
import OneLoad from "@mixins/one-load"

const { proxy } = getCurrentInstance()

onMounted(() => {
    getList()
})

/**
 * minxin列表加载
 */
const { page, pageSizeNum, pageSize, loading, arr_data, totalNums, pubParams, search_btn, pubRefreshParams, getdata } = OneLoad()
// 切换每页显示条数
watch(pageSize, (val) => {
    page.value = 1
    pubParams(getList)
})
// 跳转第几页
watch(page, (val) => {
    pubParams(getList)
})

function getList() {
    let params = {
        page: page.value,
        limit: pageSize.value,
        print_sn: print_sn.value,
        so: so.value,
    }
    getdata("printer/index", params)
}

// 搜索
const print_sn = ref("")
const so = ref("")
const handleSearch = () => {
    search_btn.value = true
    pubRefreshParams(getList)
}

/**
 * 添加/编辑
 * @property {Boolean} dialogZd 弹窗状态
 * @property {Boolean} form_loading 提交按钮状态
 * @property {Number} class_type 1是添加，2是编辑
 * @property {Array} ruleZdRef 表单规则
 * @property {Object} ruleZdForm  表单字段
 * @property {Object} ruleCheckZd  表单提示
 */
const dialogZd = ref(false)
const form_loading = ref(false)
const class_type = ref(1)
const ruleZdRef = ref(null)
const ruleZdForm = reactive({
    print_id: "",
    user: "",
    user_key: "",
    title: "",
    print_sn: "",
    print_key: "",
})
const ruleCheckZd = reactive({
    user: [{ required: true, message: "请输入飞鹅云用户名", trigger: "blur" }],
    user_key: [{ required: true, message: "请输入飞鹅云用户key", trigger: "blur" }],
    title: [{ required: true, message: "请输入打印机名称", trigger: "blur" }],
    print_sn: [{ required: true, message: "请输入打印机编号", trigger: "blur" }],
    print_key: [{ required: true, message: "请输入打印机识别码", trigger: "blur" }],
})
const submitZdForm = (formEl) => {
    if (!formEl) return
    formEl.validate((valid, fields) => {
        if (valid) {
            form_loading.value = true
            let data = {
                user: ruleZdForm.user,
                user_key: ruleZdForm.user_key,
                title: ruleZdForm.title,
                print_sn: ruleZdForm.print_sn,
                print_key: ruleZdForm.print_key,
            }
            class_type.value == 2 && (data.print_id = ruleZdForm.print_id)
            let url = class_type.value == 1 ? "printer/add" : "printer/update"
            proxy.$axios
                .post(url, data)
                .then((res) => {
                    form_loading.value = false
                    if (res.data.code == 0) {
                        dialogZd.value = false
                        proxy.$message({ message: `${class_type == 1 ? "添加" : "编辑"}成功！`, type: "success" })
                        pubParams(getList)
                    } else {
                        proxy.$message({ message: res.data.msg, type: "error" })
                    }
                })
                .catch((err) => {
                    form_loading.value = false
                })
        }
    })
}
const resetZdForm = (formEl) => {
    if (!formEl) return
    formEl.resetFields()
}
const closeDialog = () => {
    dialogZd.value = false
    form_loading.value = false
    resetZdForm(ruleZdRef.value)
}

// 添加
const clickAdd = () => {
    class_type.value = 1
    dialogZd.value = true
}

// 编辑
const clickEdit = (row) => {
    dialogZd.value = true
    class_type.value = 2
    setTimeout(() => {
        ruleZdForm.print_id = row.print_id
        ruleZdForm.user = row.user
        ruleZdForm.user_key = row.user_key
        ruleZdForm.title = row.title
        ruleZdForm.print_sn = row.print_sn
        ruleZdForm.print_key = row.print_key
    }, 50)
}

// 查看二维码
const clickView = (row) => {
    window.open(`${proxy.imgUrl + row.photo}`, "_blank") // 打开浏览器新窗口展示文件
}

// 重置卷标纸
const clickResets = (row) => {
    proxy.$axios
        .post("printer/label", {
            print_id: row.print_id,
        })
        .then((res) => {
            if (res.data.code == 0) {
                proxy.$message({ message: "重置成功！", type: "success" })
                pubParams(getList)
            } else {
                proxy.$message({ message: res.data.msg, type: "error" })
            }
        })
        .catch((err) => {})
}

// 删除单个
const handleDelete = (row) => {
    proxy.$axios
        .post("printer/delete", {
            print_id: row.print_id,
        })
        .then((res) => {
            if (res.data.code == 0) {
                proxy.$message({ message: "删除成功！", type: "success" })
                pubParams(getList)
            } else {
                proxy.$message({ message: res.data.msg, type: "error" })
            }
        })
        .catch((err) => {})
}
</script>
<script>
export default {
    name: "PrinterList",
}
</script>

<style lang="less" scoped>
.table-lr__img {
    width: 80px;
    height: 80px;
    overflow: hidden;
}
</style>
